import { Component } from 'react'
import { Row, Col, Carousel } from 'antd';
import MyCard from '../../components/myCard/index'
import styles from './banner.less'

class Banner extends Component {
  constructor(props) {
    super(props)
    this.state = {
      currentBanner: 1
    }
  }

  bannerChage = (val) => {
    console.log(val)
    this.setState({ currentBanner: val })
  }

  render () {
    const { currentBanner } = this.state
    return (
      <div className={styles.my_banner}>
        <Row gutter={12}>
          <Col span={18}>
            <Carousel afterChange={this.bannerChage}>
              <div>
                <h3>1</h3>
              </div>
              <div>
                <h3>2</h3>
              </div>
              <div>
                <h3>3</h3>
              </div>
              <div>
                <h3>4</h3>
              </div>
            </Carousel>
          </Col>
          <Col span={6}>
            <MyCard current={currentBanner} />
          </Col>
        </Row>
      </div>
    )
  }
}

export default Banner